<template>
    <view class="structure-selecter" v-if="show">
        <view class="mark" @click="closed">

        </view>
        <view class="drawer" @click.stop="">
            <view class="drawer-header">
                <view class="drawer-header-touch" @click.stop="closed"></view>
                <!-- 顶部进度条信息 S -->
                <view class="drawer-header-progress">
                    <view class="dhp-txt">
                        <view class="title">选择电梯结构({{selectedNum}}/{{allNum}})</view>
                        <view>进度:{{ (selectedNum / allNum * 100).toFixed(0) }}%</view>
                    </view>
                    <view class="dhp-progress">
                        <view :style="{ width: (selectedNum / allNum * 100).toFixed(0) + '%' }" class="dhp-progress-content"></view>
                    </view>
                </view>
                <!-- 顶部进度条信息 E -->
            </view>

            <!-- 选择题内容 S -->
            <scroll-view @scroll="onScroll" :scroll-into-view="scrollIntoView" ref="scrollView" scroll-y class="drawer-content">
                <view class="part" v-for="(item,idx) in options" :key="item.name" :id="'options'+idx">
                    <view class="part-name">
                        {{ item.name }}
                    </view>
                    <view class="part-childs">
                        <view class="part-childs-item" v-for="it in item.children" :key="it.index">
                            <view :class="['pci-name',it.hidden?'disabled':'']">
                                <text v-if="it.required&&!it.hidden">*</text>{{ `${it.index}.${it.name}` }}
                            </view>
                            <view class="pci-opts">
                                <view :class="['tag',it.selected===index?'act':'',tag.disabled ? 'disabled' : '']" @click="selectedItem(it,index,tag)" v-for="(tag, index) in it.children" :key="index">
                                    {{ tag.name }}
                                </view>
                            </view>

                        </view>
                    </view>

                </view>
            </scroll-view>
            <!-- 选择题内容 E -->
            <view class="drawer-footer">
                <view @click="submitFuc" class="drawer-footer-btn">确定</view>
            </view>
            <view class="tabs">
                <view @click="scrollToView('options'+index,index)" :class="['tabs-item',activeTab==index?'act':'']" v-for="(item, index) in options" :key="index">{{ item.name }}</view>
            </view>
        </view>
    </view>
</template>
<script>
import optData from '../options.json'; 
import { debounce } from '@/utils/tools.js';
import {editStructure} from '@/apis/elevator.js';
let that;
export default {
	name: 'structure-selecter',
	data() {
		return {
			elevatorId:'',
			options: JSON.parse(JSON.stringify(optData)),
			show: false,
			scrollIntoView:'',
			scrollTop:0,
			activeTab:0,
			selectedNum:0,
			requiredNum:0,
			allNum:21,
		};
	},
	mounted() {
		that = this;
	},
	methods: {
		// 提交
		async submitFuc() { 
			if (this.requiredNum < this.allNum - 1) {
				// 没填完
				uni.showToast({
					title: '您还有必填项没完成',
					icon: 'none'
				}); 
				return;
			}
			uni.showLoading({
				title:'提交中',
				mask:true,
			});
			let opts = this.options;
			let ids = [];
			let names = [];
			let ansMap = {}; 
			for (let i = 0; i < opts.length; i++) {
				for (let j = 0; j < opts[i].children.length; j++) {
					if (opts[i].children[j].selected !== '') {
						ansMap[opts[i].children[j].index] = opts[i].children[j].selected;
						let opt = opts[i].children[j].children[opts[i].children[j].selected];
						// console.log('opt',opt,ansMap)
						if (opt.bind && opt['ids' + ansMap[opt.bind]]) {
							ids.push(...opt['ids' + ansMap[opt.bind]]);
						} else {
							ids.push(...opt.ids);
						}
						names.push(opts[i].children[j].children[opts[i].children[j].selected].name);
					}
				}
			}
			editStructure({
				categoryArrIds:ids.join(','),
				categoryArrNames:names.join(','),
				elevatorId:this.elevatorId,
				isIntegrity:true
			}).then(()=>{
				this.$emit('success');
				this.show = false; 
				uni.hideLoading(); 
			}).catch(()=>{
				uni.hideLoading();
			});
		},
		// 计算进度条
		setProgress: debounce(() => {
			let opts = that.options;
			let selected = 0;
			let required = 0;
			let allNum = 0;
			for (let i = 0; i < opts.length; i++) {
				for (let j = 0; j < opts[i].children.length; j++) {
					if (!opts[i].children[j].hidden) {
						allNum++;
						if (opts[i].children[j].selected !== '') {
							selected++;
							if (opts[i].children[j].required) {
								required++;
							}
						}
					} 
				}
			}
			// 所有
			that.selectedNum = selected; 
			// 必填项
			that.requiredNum = required; 
			that.allNum = allNum;
		}, 200),
		selectedItem(item,index,tag) {  
			if (tag.disabled) {
				return;
			}
			if (item.index == 17) {
				// 轿/层门扇数 (三扇不能中分，四扇不能旁开)
				if (index == 1) {
					// 选中三扇 禁用中分
					this.options[2].children[6].children[1].disabled = true;
					this.options[2].children[6].children[0].disabled = false;
					if (this.options[2].children[6].selected == 1) {
						this.options[2].children[6].selected = '';
						item.children.forEach(it => {
							it.disabled = false; 
						});
					}
				} else if (index == 2) {
					// 选中四扇 禁用旁开
					this.options[2].children[6].children[0].disabled = true; 
					this.options[2].children[6].children[1].disabled = false;
					if (this.options[2].children[6].selected === 0) {
						this.options[2].children[6].selected = '';
						item.children.forEach(it => {
							it.disabled = false; 
						});
					}
				} else {
					this.options[2].children[6].children[0].disabled = false;
					this.options[2].children[6].children[1].disabled = false;
				}
			}

			if (item.index == 18) {
				// 轿/层门扇数 (三扇不能中分，四扇不能旁开)
				if (index == 0) {
					// 选中旁开 禁用四扇
					this.options[2].children[5].children[1].disabled = false;
					this.options[2].children[5].children[2].disabled = true;
					if (this.options[2].children[5].selected == 2) {
						this.options[2].children[5].selected = '';
						item.children.forEach(it => {
							it.disabled = false; 
						});
					}
				} else if (index == 1) {
					// 选中中分 禁用三扇
					this.options[2].children[5].children[1].disabled = true;
					this.options[2].children[5].children[2].disabled = false;
					if (this.options[2].children[5].selected === 1) {
						this.options[2].children[5].selected = '';
						item.children.forEach(it => {
							it.disabled = false; 
						});
					}
				}
			}
			item.selected = index;
			this.setProgress();
		},
		init(form) {
			this.show = true;
			this.elevatorId = form.elevatorId;
			this.$nextTick(()=>{
				let top = 0;
				this.options = JSON.parse(JSON.stringify(optData));
				for (let i = 0; i < this.options.length; i++) {
					this.options[i].top = top;
					let num = uni.upx2px(54) + (uni.upx2px(122)) * this.options[i].children.length; 
					top = top + num;
				}
				let categoryArrNames = (form.categoryArrNames || '').split(',');
				this.reViewOpt(categoryArrNames);
				this.setProgress();
			});
		},

		// 回显选择题
		reViewOpt(list) {
			let opts = this.options;
			for (let i = 0; i < opts.length; i++) {
				for (let j = 0; j < opts[i].children.length; j++) {
					for (let k = 0; k < opts[i].children[j].children.length; k++) {
						let name = opts[i].children[j].children[k].name;
						if (list.indexOf(name) != -1) {
							opts[i].children[j].selected = k;
						} 
					}
				}
			}
		},
		closed() {
			this.show = false;
		},
		// 点击 tab 滚动到对应位置
		scrollToView(id,index) {
			console.log(id);
			this.scrollIntoView = id; 
			this.activeTab = index;
		},
		onScroll(e) {
			for (let i = 0; i < this.options.length; i++) {
				// console.log(1111,this.options[i].top);
				if (e.detail.scrollTop + 150 < this.options[i].top) {
					this.activeTab = Math.max(0,i - 1);
					break;
				}
			}
			// console.log(e.detail.scrollTop,this.activeTab, this.options);
		}
	}
};
</script>
<style lang="scss" scoped>
.structure-selecter {
    .mark {
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.1696);
        z-index: 99;
    }

    @keyframes frame {
        from {
            bottom: -70vh;
        }

        to {
            bottom: 0;
        }
    }

    .drawer {
        width: 100%;
        height: 80vh;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        animation: frame 0.2s linear;
        border-radius: 4px 4px 0px 0px;
        overflow: hidden;

        &-header {
            width: calc(100% - 80rpx);
            background-color: #fff;
            height: 160rpx;
            padding: 0 40rpx;

            &-touch {
                width: 100%;
                height: 10px;
                padding: 20rpx 0;
                position: relative;
            }

            &-touch::after {
                content: '';
                position: absolute;
                width: 64rpx;
                height: 10rpx;
                border-radius: 2rem;
                left: calc(50% - 32rpx);
                background: #D8D8D8;
            }

            &-progress {
                width: 100%;

                .dhp-txt {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 28rpx;
                    color: #3D3D3D;

                    .title {
                        color: #333333;
                        font-weight: bold;
                        font-size: 32rpx;
                    }
                }

                .dhp-progress {
                    width: 100%;
                    height: 12rpx;
                    background: #E3F2FD;
                    border-radius: 2rem;
                    margin-top: 16rpx;

                    &-content {
                        height: 12rpx;
                        background-color: #0091FF;
                        border-radius: 2rem;
                        transition: .3s all;
                    }
                }

            }

        }

        &-content {
            flex: 1;
            width: 100%;
            height: calc(100% - 160rpx - 110rpx);
            overflow-y: scroll;
            color: #333333;

            .part {
                width: calc(100% - 38rpx);
                padding-left: 38rpx;

                &-name {
                    font-size: 30rpx;
                    font-weight: bold;
                     height: 54rpx;
                     line-height: 40rpx;
                }

                &-childs {
                    width: 100%;

                    &-item {
                        width: 100%;
                        height: 122rpx;

                        .pci-name {
                            font-size: 28rpx;
                            font-weight: normal;
                            margin-bottom: 10rpx;
                            text{
                                color:#E02020 ;
                            }
                        }

                        .pci-opts {
                            width: 100%;
                            display: flex;
                            flex-wrap: wrap;

                            .tag {
                                width: 214rpx;
                                height: 48rpx;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border: 1px solid #ccc;
                                border-radius: 8rpx;
                                transition: .3s all;
                                margin-right: 12rpx;
                            }

                            .act {
                                border-color: #0091FF;
                                color: #0091FF;
                            }
                        }

                        .disabled{
                            color: #999 !important;
                        }
                    }
                }
            }
        }

        &-footer {
            height: 110rpx;
            width: 100%;
            background-color: #fff;

            &-btn {
                width: calc(100% - 80rpx);
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                border-radius: 8rpx;
                background-color: #0091FF;
                margin: 12px auto;
                font-size: 29rpx;
                text-align: center;
            }

        }

        .tabs {
            display: flex;
            flex-direction: column;
            position: absolute;
            right: 0;
            bottom: 44%;
            &-item {
                padding: 0 20rpx;
              
                height: 48rpx;
                line-height: 48rpx;
                border-radius: 24rpx 0px 0px 24rpx;
                color: #333;
                background-color: #fff;
                margin-top: 16rpx;
                border-width: 1px 0px 1px 1px;
                border-style: solid;
                border-color: #E6E9EB;
                transition: .3s all;
            }

            .act {
                border-color: #0091FF;
                color: #fff;
                background-color: #0091FF;
            }
        }

    }
}
</style>